<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <el-form :ref="refName" label-position="top" :model="model" :rules="rules" class="updateForm">
      <el-row>
        <el-col :span="24">
          <el-form-item label="账号数据:" prop="number">
            <el-input v-model="model.number" type="textarea" rows="3" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数据类别:" prop="className">
            <el-select v-model="model.className" placeholder="请选择" style="width: 100%;" clearable>
              <el-option v-for="item in numberClassList" :key="item.className" :label="item.className" :value="item.className" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注1:">
            <el-input v-model="model.Remarks1" type="textarea" rows="3" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注2:">
            <el-input v-model="model.Remarks2" type="textarea" rows="3" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注3:">
            <el-input v-model="model.Remarks3" type="textarea" rows="3" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="drawer-footer">
      <div class="drawer-footer-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { httpAction } from '@/api/manage'
import { apiGetNumberClass } from '@/api/GetNumberBusiness'

export default {
  name: 'DrawerDictList',
  components: {},
  props: {},
  data() {
    return {
      model: {
        column3: 0
      },
      refName: 'ruleForm',
      visible: false,
      disableSubmit: false,
      title: '',
      size: '50%',
      numberClassList: [],
      rules: {
        number: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        className: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      userInfo: this.$ls.get('USER_INFO') || {},
      url: {
        add: 'NumberData.aspx?action=Insert',
        edit: 'NumberData.aspx?action=Update'
      }
    }
  },
  computed: {},
  watch: {
    visible: {
      handler(v) {
        if (v) {
          this.getClassList()
        }
      }
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    // 账号类别列表
    getClassList() {
      const p = {
        UserNum: this.userInfo.loginNum
      }
      this.$store.dispatch('app/setLoading', true)
      apiGetNumberClass(p).then(res => {
        console.log('账号类别列表', res)
        if (res.code === 1) {
          this.numberClassList = res.data.list
          console.log('this.numberClassList', this.numberClassList)
        } else {
          this.$message.warning(res.message)
        }
      }).catch((res) => {
        this.$message.error(res.message)
      }).finally(res => {
        this.$store.dispatch('app/setLoading', false)
      })
    },
    add() {
      this.updateState = 'add'
      this.visible = true
      this.model = {}
      this.$nextTick(() => {
        this.$refs[this.refName]?.clearValidate()
      })
    },
    edit(rowData) {
      console.log('rowData', rowData)
      this.updateState = 'edit'
      this.$refs[this.refName]?.clearValidate()
      this.visible = true
      this.model = {
        id: rowData.id,
        className: rowData.numClass,
        number: rowData.number,
        Remarks1: rowData.Remarks1,
        Remarks2: rowData.Remarks2,
        Remarks3: rowData.Remarks3
      }
    },
    submitForm() {
      // this.model.column4 = this.$moment(this.model.column4).format('YYYY-MM-DD')
      console.log('表单数据', this.model)
      const that = this
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          let httpurl = ''
          let method = ''
          if (that.updateState === 'add') {
            httpurl = that.url.add
            method = 'post'
          } else if (that.updateState === 'edit') {
            httpurl = that.url.edit
            method = 'post'
          } else {
            that.$message.warning('更新标识无效')
            return
          }
          this.$store.dispatch('app/setLoading', true)
          httpAction(httpurl, that.model, method).then((res) => {
            if (res.code === 1) {
              that.modelClose()
              that.$message.success(res.data || '操作成功！')
              that.$emit('ok')
            } else {
              that.$message.warning(res.data || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.updateForm{
  padding: 20px 30px 0;
  margin-bottom: 90px;
  ::v-deep .el-form-item__label{
    line-height: 16px;
  }
}
.el-col{
  padding: 0 8px;
}
.drawer-footer{
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:65px;
  background:#fff;
  z-index:999;
  padding: 16px 29px;
  box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
}
// 内容超长启用滚动条
::v-deep .el-drawer__body {
    overflow: auto;
}
// 隐藏滚动条, 隐藏后仍然可以滚动
// ::v-deep .el-drawer__container ::-webkit-scrollbar{
//     display: none;
// }
</style>
